const path = require('path') //引入node相关的模块的包，path是个模块，因为下面要指定导出路径时需要的是绝对路径，需要用到这个模块
const webpack = require('webpack') //引入webpack，使用其中的插件
/*
  * 引入vue-loader plugin
  * 新版vue-loader 需要这样处理
  * https://vue-loader.vuejs.org/guide/#vue-cli
  */
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: "./src/main.js", //需要打包导出的文件
  output: { //打包导出后的文件路径
    /*resolve()方法可以对两个路径进行拼接，__dirname 是node上下中一个全局变量，可以获取当前目录所在路径，dist就是我们要导出的路径
      理解：__dirname获取本文件（webpack.config.js）的所在路径，是个绝对路径，然后和后面的dist进行拼接，也就指定到了本文件同级目录下的dist文件夹中了*/
    path: path.resolve(__dirname, "dist"),
    filename: "build.js", //打包导出的文件名
    /*会给所有url的前面加上配置的这个值，比如有个元素的background-image的url为../img/huluwa.jpg,那么最后打包生成了个文件，
      图片生成重命名后的文件名为1321561016516dfasds.jpg，那么最后执行文件路径时，如果没有配置就是url("1321561016516dfasds.jpg"),
      加上了之后就是url("dist/1321561016516dfasds.jpg")，这样才能正确找到文件
     */
    publicPath: "./dist/"
  },
  mode: 'development', //指定导出的版本，4.x版本的webpack需要指定，不然就会自动使用production（生产环境）版本，这里指定为开发版本，也就是生成文件不会压缩
  module: {
    rules: [
      {
        test: /\.css$/,//正则匹配资源
        //css-loader只负责将css文件进行加载
        //style-loader负责将样式添加到dom
        //使用多个loader时，数组中加载依赖是从右往左加载，这里style-loader必须在css-loader前面
        use: [
          {loader: "style-loader"},
          {loader: "css-loader"},
        ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // style-loader负责将样式添加到dom
        }, {
          loader: "css-loader" // css-loader只负责将css文件进行加载
        }, {
          loader: "less-loader" // 编译less文件为css
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，会将图片编译成base64字符串的形式,
              //当图片大于这个limit，会用file-loader进行加载
              limit: 13000,
              //在webpack4.x必须显式的指定fallback备用方法，这里指定为file-loader
              fallback: require.resolve('file-loader'),
              encoding: "base64",
              //这个表示在打包生成的文件的名字，如果不配置这个，会根据hash生成一个名字，这个配置就是自定义命名规则
              //这个表示会在输出文件夹dist下创建一个img文件夹，所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
              name: "img/[name].[hash:8].[ext]",
            },
          },
          /*上面指定了fallback，是必须的，在webpack4.x下，不要配置下面这个file-loader，因为这里我遇到了坑，先是配置了上面的
          url-loader,然后配置了下面的file-loader，最后图片文件是按照配置生成了，但是却不引用，没生效，页面没有加载，同时配置了下面这个
          还影响了页面中base64显示图片，不会加载出来，但是当我把下面这个配置删除时，执行npm run dev打包时却显示找不到file-loader，搞了
          很久，才试出来，需要在url-loader中配置fallback来显示指定备用方法指向file-loader，这样才有效果，同时，上面指定fallback，也不要
          配置下面这个file-loader，否则依然不起效果
           */
          // {
          //     loader: 'file-loader',
          //     options: {
          //         //这个表示在打包生成的文件的名字，如果不配置这个，会根据hash生成一个名字，这个配置就是自定义命名规则
          //         //这个表示会在输出文件夹dist下创建一个img文件夹，所有的文件会以 “原名字+hash值8位+文件扩展名”生成最终的文件来供使用
          //         name: "img/[name].[hash:8].[ext]",
          //         publicPath: './dist/',
          //     },
          // },
        ]
      },
      {
        test: /\.m?js$/,
        // exclude排除
        // include包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: {
    // extensions: ['.js','.css','.vue'],// 配置这个我们在引用js文件，css文件，vue文件就可以省略后缀，你配置了哪些文件的后缀就可以胜率
    //起别名
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  },
  plugins: [
    new VueLoaderPlugin(),  /* 新版vue-loader需要引入这个插件 */
    new webpack.BannerPlugin('最终版权归我所有')   /* 引入版权插件插件，打包后就会出现版权信息 */
  ]
}

/*在控制台中，也就是cmd终端进入到当前目录，输入如下命令即可打包，会打包成上面mode指定版本的形式:
   > webpack
*/